<template>
  <div class="bg">
    <div ref="pieChartData" class="pie"></div>
    <div class="pie_bg">
      <img class="pie_cover" :src="require('/public/images/pie_bg.png')" alt="">
      <div class="black_circle"></div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts/core';
  import {
    ToolboxComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent
  } from 'echarts/components';
  import { PieChart } from 'echarts/charts';
  import { LabelLayout } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';

  echarts.use([
    ToolboxComponent,
    TooltipComponent,
    LegendComponent,
    // TitleComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
  ]);

  export default {
    name: "PieChartData",
    props: {
      dataList: {
        type: Array,
        default: () => []
      },
    },
    components: {

    },
    data() {
      let that = this
      return {
        valueList: [],
        option: {
          // title: {
          //   text: '品类销售占比',
          //   left: 10,
          //   top: 10,
          //   textStyle: {
          //     color: 'white'
          //   }
          // },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name + " " + +params.percent + " %"
            }
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 60,
            top: 0,
            bottom: 0,
            icon: 'circle',
            textStyle: {
              color: 'white',
              fontSize: 14,
              fontWeight: 400,
            },
            formatter: function (name) {
              let total = 0
              let target = 0
              for (let index = 0; index < that.valueList.length; index++) {
                total += that.valueList[index].value
                if (that.valueList[index].name == name) {
                  target = that.valueList[index].value
                }
              }

              return name + ' ' + ((target / total) * 100).toFixed(2) + '%'
            }
          },
          animation: false,
          series: [
            {
              name: '平台各品类销售占比',
              type: 'pie',
              radius: [25, 80],
              center: ['100', '50%'],
              avoidLabelOverlap: true,
              data: [],
              label: {
                show: false,
                formatter: function (params) {
                  if (params.name == "普洱茶") {
                    return params.name + "\n" + +params.percent + "%"
                  } else {
                    return params.name + "" + +params.percent + "%"
                  }
                },
                color: 'white',
                fontStyle: 'normal',
                fontSize: 13
              },
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              labelLine: {
                length: 6,
                length2: 5
              },
            }
          ]
        }
      }
    },
    computed: {

    },
    watch: {
      dataList(val) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
    methods: {
      init() {
        this.handleList()
        this.option.series[0].data = this.valueList

        var chartDom = this.$refs.pieChartData;
        var myChart = echarts.init(chartDom);
        myChart.setOption(this.option)
      },
      handleList() {
        if (this.dataList && this.dataList.length > 0) {
          this.valueList = []

          for (let index = 0; index < this.dataList.length; index++) {
            const element = this.dataList[index];
            var item = {}
            item.name = element.name
            item.value = element.amount
            this.valueList.push(item)
          }
        }
      }
    },
    created() {
      
    },
    mounted() {
      
    },
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>

<style lang='scss' scoped>

  .bg {
    position: relative;
    width: 100%;
    height: 100% ;
    overflow: hidden;
  }
  .pie {
    position: absolute;
    top: 75px;
    left: 36px;
    width: calc(100% - 36px);
    height: 200px;
  }

  .pie_bg {
    position: absolute;
    top: 75px;
    left: 36px;
    width: 200px;
    height: 200px;

    .pie_cover {
      width: 100%;
    }

    .black_circle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70px;
      height: 70px;
      transform: translate(-50%, -50%);
      border-radius: 35px;
      background-color: rgba(0, 19, 66, 0.7);
    }
  }
</style>